import { animate, style, transition, trigger } from '@angular/animations';
import { Component, OnInit, Renderer2 } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { firstValueFrom } from 'rxjs';
import { BreadcrumbData } from 'src/app/components/my-breadcrumb/my-breadcrumb.component';
import { CommonService } from 'src/app/service/common/common.service';
import { FuncData, NavDetailsData, NavInfoData, navInfos } from './nav-infos';
import { openFuncs } from './open-func';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss'],
  animations: [
    trigger('myNavAnimation', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms ease-out', style({ opacity: 1 })),
      ]),
      transition(':leave', [
        animate('100ms', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class NavComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private commonService: CommonService,
    private renderer2: Renderer2,
  ) { }
  breadcrumbData: BreadcrumbData[] = []
  
  ngOnInit() {
    this._getRouterParam()
  }

  url: string = ''
  _getRouterParam(){
    this.route.paramMap.subscribe((res: any) => {
      this.url = res.get('url')
      this.currentNav = navInfos.find(item => item.code === this.url)

      if(!this.currentNav) {
        this.router.navigate(['/home'])
        return
      }
      this.bannerBg = this.currentNav.backImg
      this.breadcrumbData = [
        { title: this.currentNav.sortName }
      ]
      // 获取导航列表
      this._getNavList()
    })
  }

  bannerBg = ''

  navList: NavDetailsData[] = []
  currentNav: NavInfoData | undefined = {} as NavInfoData
  skeleton = false
  _getNavList(){
    this.navList = []
    this.skeleton = false
    setTimeout(() => {
      this.skeleton = true
    }, 200);
    this.commonService._getNavList().subscribe(res => {
      const nav = res && res.find((item: any) => item.sortCode === this.currentNav?.sortCode)
      if(nav && nav.children.length > 0){
        this.navList = nav.children
      }
      console.log(this.navList)
      // this.navList = this.navList.map(item => {
      //   item.funcs = item.funcs.filter((_: FuncData) => {
      //     return openFuncs.indexOf(_.funcName) > -1
      //   })
      //   return item
      // })
    })
  }

  // 导航
  doNavigate(func: FuncData, nav: NavDetailsData){
    let webPath = func.webPath
    // 外部链接
    if(webPath.indexOf('http') > -1){
      location.href = webPath
      return
    }
    
    
    console.log(webPath)
    if(webPath.indexOf('cancel-user') > -1 || webPath.indexOf('base-form') > -1){
      webPath = '/base-form'
      const queryParams = {
        id: func.funcTypeId,
        name: func.funcName,
        isDetail: true,
        sortName: this.currentNav?.sortName,
        funcCode: func.funcCode,
        path: func.webPath
      }

      this.router.navigate([webPath], { queryParams })
      return
    }else{
      const queryParams = {
        name: func.funcName,
        funcCode: func.funcCode,
      }

      this.router.navigate([webPath], { queryParams })
      return
    }

    // 普通跳转
    // this.router.navigate([webPath])
  }

  onMouseEnter(event: any){
    const imgEle = event.target['children'][0]
    this.renderer2.setAttribute(imgEle, 'src', imgEle.src.replace('third', 'third1'))
  }

  onMouseLeave(event: any){
    const imgEle = event.target['children'][0]
    this.renderer2.setAttribute(imgEle, 'src', imgEle.src.replace('third1', 'third'))
  }
}
